<!--  -->
<template>
  <view class="job-card" @click="toDetail(item)">
    <view class="job-card__title"> {{ item.jobName }} </view>
    <!-- 学历要求 -->
    <view class="job-card__edu-demand flex gap-1 mb-1.6" v-if="item.minEducation">
      <c-tag v-for="el in item.minEducation?.split(',') || []" :key="el" :text="el" />
    </view>
    <!-- 类型 -->
    <view class="job-card__type flex gap-1 mb-1.6" v-if="item.majorName">
      <c-tag v-for="el in item.majorName?.split(',') || []" :key="el" :text="el" type="default" />
    </view>
    <view class="job-card__company">
      <text>{{ item.companyName }}</text>
      <!-- <c-tag text="上市" type="blue" border></c-tag> -->
      <c-tag
        v-for="el in item.companyNature?.split(',') || []"
        :key="el"
        :text="el"
        type="blue"
        border
      ></c-tag>
    </view>
    <view class="job-card__other-info flex justify-between">
      <view class="job-card__position">
        <wd-icon name="location" size="24rpx" color="rgba(62,70,84,0.55)"></wd-icon>
        <text>{{ item.cityName }}</text>
      </view>
      <view
        >{{ dateFormat(item.hireBeginTime) }}-{{ dateFormat(item.hireEndTime) || '招满为止' }}</view
      >
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { dateFormat } from '@/utils/index';
  import { navigateTo } from '@/utils/router';
  defineProps({
    item: {
      type: Object,
      default: () => ({}),
    },
  });

  const toDetail = (item) => {
    navigateTo(`/pages-sub/jobDetail/index`, { id: item.jobId || item.id });
  };
</script>

<style lang="scss" scoped>
  .job-card {
    background: #ffffff;
    border-radius: 20rpx;
    border: 2rpx solid rgba(62, 70, 84, 0.09);
    padding: 24rpx 32rpx;
    &__title {
      font-weight: 600;
      font-size: 32rpx;
      color: $uni-color-title;
      margin-bottom: 16rpx;
    }
    &__company {
      display: flex;
      gap: 12rpx;
      align-items: center;
      flex-wrap: wrap;
      & > text {
        margin-right: 16rpx;
        color: #3e4654;
      }
    }
    &__other-info {
      margin-top: 16rpx;
      padding-top: 16rpx;
      border-top: 1rpx solid #d8d8d8;
      font-weight: 400;
      font-size: 26rpx;
      color: rgba(62, 70, 84, 0.7);
    }
  }
</style>
